<script>
import {getProListFn,getCategoryFn,proSearchFn,changeDataFn} from '@/api/pro';
import { ElMessage } from 'element-plus'
export default{
    data() {
        return {
            currentPage:1,
            proList:[],
            total:0,
            proCategory:[],
            searchData:{
                category:'',
                search:''
            }
        }
    },
    mounted() {
        getProListFn({
            count:this.currentPage,
            limitNum:5
        }).then(res=>{
            this.proList=res.data
            this.total=res.total
            console.log(this.proList);
        })
        getCategoryFn().then(res=>{
            if(res.code=200){
                this.proCategory=res.data
                console.log(res.message);
            }            
        })
    },
    methods: {
        changePage(){
            getProListFn({
            count:this.currentPage,
            limitNum:5
        }).then(res=>{
            this.total=res.total
            this.proList=res.data
            // console.log(this.proList);
        })
        },
        searchClick(){
            proSearchFn(this.searchData).then(res=>{
                if(res.code=200){
                    console.log(res);
                    this.proList=res.data
                    this.total=res.data.length
                    ElMessage.success(res.message)
                }else{
                    ElMessage.error(res.message)
                }
            })
        },
        changecommend(row){
            changeDataFn({
                proid:row.proid,
                type:'isrecommend',
                flag:row.isrecommend
            }).then(res=>{
                if(res.code==200){
                    ElMessage.success(res.message)
                }else{
                    ElMessage.error(res.message)
                }
            })
        },
        changeisseckill(row){
            changeDataFn({
                proid:row.proid,
                type:'isseckill',
                flag:row.isseckill
            }).then(res=>{
                if(res.code==200){
                    ElMessage.success(res.message)
                }else{
                    ElMessage.error(res.message)
                }
            })
        }
    },
}
</script>

<template>
    <div class="box">
        <h4>商品列表</h4>
    <!-- 搜索 -->
        <el-select v-model="searchData.category" placeholder="请选择商品类型"  style="width: 240px">
      <el-option v-for="item in proCategory" :key="item" :label="item" :value="item"/>

    </el-select>
    <el-input v-model="searchData.search" @keyup.enter="searchClick" style="width: 240px;" placeholder="请输入商品名称"></el-input>
    </div>


    <!-- 列表渲染 -->
    <el-table :data="proList">
    <el-table-column width="100" type="index" label="序号" >
        <template #default={$index}>
            <el-tag> 
               {{(currentPage-1)*5+1+ $index }} 
            </el-tag>
        </template>
    </el-table-column>
    <el-table-column w prop="img" label="图片">
        <template #default={row}>
            <el-image :style="{width:'80px',height:'80px'}" :src="row.img1"> 
            </el-image>
        </template>
    </el-table-column>
    <el-table-column width="280" prop="proname" label="商品名称"></el-table-column>
    <el-table-column prop="category" lab el="商品分类"></el-table-column>
    <el-table-column prop="originprice" label="商品价格"></el-table-column>
    <el-table-column prop="isrecommend" label="是否推荐">
        <template #default={row}>
            <el-switch @change="changecommend(row)" v-model="row.isrecommend" :active-value="1" :inactive-value="0"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
        />
        </template>
    </el-table-column>
    <el-table-column  prop="isseckill" label="是否秒杀">
        <template #default={row}> 
            <el-switch @change="changeisseckill(row)" v-model="row.isseckill" :active-value="1" :inactive-value="0"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
        />
        </template>
    </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination @current-change="changePage" :page-size="5" v-model:current-page="currentPage" background layout="prev, pager, next" :total="total"  />
</template>

<style scoped lang="scss">
.box{
    display: flex;
    align-items: center;
}
</style>